<template>
  <div id="food">
    <el-card class="box-card">
      <el-row>
        <el-col :span="4">
          <el-select v-model="queryParams.state" clearable placeholder="请选择菜品状态">
            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryParams.typeId" clearable placeholder="请选择菜品类别">
            <el-option v-for="o in categories" :key="o.typeId" :label="o.typeName" :value="o.typeId">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-input v-model="queryParams.startPrice" placeholder="最低售价"></el-input>
        </el-col>
        <el-col class="line" :span="1" style=" width: 12px; margin-left: 8px; margin-top: 5px;">-</el-col>
        <el-col :span="3">
          <el-input v-model="queryParams.endPrice" placeholder="最高售价"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">

          <el-button type="primary" @click="getList()" style="margin-left: 10px;">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addWindow = true">新增菜品</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-table
              :data="list"
              style="width: 100%">
              <el-table-column
                prop="coverPhoto"
                label="菜品图片"
                width="180">
                <template slot-scope="scope">
                 <img slot="reference" :src="scope.row.coverPhoto"
                   style="width: 70px;height: 70px; cursor:pointer">
                </template>
              </el-table-column>
              <el-table-column
                prop="foodName"
                label="菜品名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="detailInfo"
                label="详情"
                width="180">
              </el-table-column>
              <el-table-column
                prop="price"
                label="售价"
                width="180">
              </el-table-column>
              <el-table-column
                prop="typeName"
                label="菜品类别"
                width="180">
              </el-table-column>
              <el-table-column
                prop="specialty"
                label="菜品级别"
                width="180">
              </el-table-column>
              <el-table-column
                prop="stateName"
                label="状态"
                width="180">
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.sortNum==0" size="mini" @click="specialty(scope.row, 1)">设为招牌</el-button>
                  <el-button v-if="scope.row.sortNum==1" size="mini" @click="specialty(scope.row, 0)">设为普通</el-button>
                  <el-button size="mini" @click="showUpdate(scope.row)">编辑</el-button>
                  <el-button v-if="scope.row.stateName=='下架中'" size="mini" type="danger" @click="changeState(scope.row.id, 1)">上架</el-button>
                  <el-button v-if="scope.row.stateName=='上架中'" size="mini" type="danger" @click="changeState(scope.row.id, 0)">下架</el-button>
                </template>
              </el-table-column>
            </el-table>
      </el-row>


    </el-card>

    <el-dialog title="新增菜品" :visible.sync="addWindow" width="30%" :before-close="handleClose">
      <el-form ref="newFood" :model="newFood" label-width="80px">
        <el-form-item label="封面图片">
          <el-col :span="4" style="  margin-left: 10px; margin-top: 20px;">
            <el-upload class="avatar-uploader" action="http://localhost:8080/foodVariety/upload" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="newFood.coverPhoto" :src="newFood.coverPhoto" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-form-item>
        <el-form-item label="菜品类别">
          <el-select v-model="newFood.typeId" clearable placeholder="请选择菜品类别">
            <el-option v-for="o in allCategories" :key="o.id" :label="o.typeName" :value="o.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品名称">
          <el-input v-model="newFood.foodName"></el-input>
        </el-form-item>

        <el-form-item label="简介">
          <el-input v-model="newFood.synopsis"></el-input>
        </el-form-item>
        <el-form-item label="详细信息">
          <el-input v-model="newFood.detailInfo"></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="newFood.price"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addWindow = false">取 消</el-button>
        <el-button type="primary" @click="addFood">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="更新菜品" :visible.sync="updateWindow" width="30%" :before-close="handleClose">
      <el-form ref="toUpdate" :model="toUpdate" label-width="80px">
        <el-form-item label="封面图片">
          <el-col :span="4" style="  margin-left: 10px; margin-top: 20px;">
            <el-upload class="avatar-uploader" action="http://localhost:8080/foodVariety/upload" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="toUpdate.coverPhoto" :src="toUpdate.coverPhoto" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-form-item>
        <el-form-item label="菜品类别">
          <el-select v-model="toUpdate.typeId" clearable placeholder="请选择菜品类别">
            <el-option v-for="o in allCategories" :key="o.id" :label="o.typeName" :value="o.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品名称">
          <el-input disabled v-model="toUpdate.foodName"></el-input>
        </el-form-item>

        <el-form-item label="简介">
          <el-input v-model="toUpdate.synopsis"></el-input>
        </el-form-item>
        <el-form-item label="详细信息">
          <el-input v-model="toUpdate.detailInfo"></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="toUpdate.price"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateWindow = false">取 消</el-button>
        <el-button type="primary" @click="updateData()">确 定</el-button>
      </span>
    </el-dialog>




  </div>
</template>

<script>
  export default {
    name: 'Food',
    data() {
      return {
        addWindow: false,
        updateWindow: false,
        status: [{
          value: '0',
          label: '下架'
        }, {
          value: '1',
          label: '上架'
        }],
        value: '',
        startPrice: "",
        endPrice: "",
        newFood: {},
        categories: [],
        allCategories: [],
        list: [],
        queryParams: {

        },
        toUpdate: {

        }
      }
    },
    methods: {
      changeState(id, state) {
        this.$http.post("/foodVariety/updateStatus", {
          id: id,
          state: state
        }).then(resp => {
          alert(resp.data.message);
          if (resp.data.code == 200) {
            this.getList();
          }else{
            this.$message.error(resp.data.message)
          }
        })
      },
      specialty(data, sortNum) {
        this.$http.post("/foodVariety/setSpecialty", {
          id: data.id,
          sortNum: sortNum
        }).then(resp => {
          alert(resp.data.message);
          if (resp.data.code == 200) {
            this.getList();
          }
        })
      },
      getList() {
        this.$http.get("/foodVariety/search", {params: this.queryParams})
        .then(resp => {
          if (resp.data.code == 200) {
            console.log(resp)
            this.list = resp.data.data.list;
          }
        })
      },
      getCategories() {
        this.$http.get("/storeInfo/categories")
        .then(resp => {
          if (resp.data.code == 200) {
            this.categories = resp.data.data;
            // console.log("wwwwwwwwwwwwwwww")
            // console.log(this.categories);
          }
        })
      },
      getAllCategories() {
        this.$http.get("/foodType/showNodeTypeTree")
        .then(resp => {
          console.log(resp)
          if (resp.data.code == "200") {
            this.allCategories = resp.data.data;
            console.log("-----")
            console.log(this.allCategories)
          }
        })
      },
      addFood() {
        this.$http.post("/foodVariety/insert", this.newFood).then(resp => {
          alert(resp.data.message)
          if (resp.data.code == 200) {
            this.newFood = {};
            this.addWindow = false;
            this.getList();
          }else{
            this.$message.error(resp.data.message)
          }
          //刷新
        })
      },
      handleAvatarSuccess(res, file) {
        this.newFood.coverPhoto = res.data
      },
      beforeAvatarUpload(file) {},
      showUpdate(data) {
        this.toUpdate = data;
        this.updateWindow = true;
      },
      updateData() {
        this.$http.post("/foodVariety/update", this.toUpdate)
        .then(resp => {
          if(resp.data.code==200){
            alert(resp.data.message);
            this.updateWindow=false;
            this.getList();
          }else{
            this.$message.error(resp.data.message)
          }

        })
      }
    },
    created() {
      this.getCategories();

    },
    mounted() {
      this.getAllCategories();
      this.getList();
    }
  }
</script>

<style scoped>
  #food {
    background-color: white;
    padding: 18px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
